﻿<!DOCTYPE html>
<html style="height: 100%; overflow: hidden; ">
<head>
    <meta charset="utf-8" />
    <title>Html客户端</title>
    <!--必要-->
    <link href="Element/element.css" rel="stylesheet" />
    <script src="Static/jquery.min.js"></script>
    <script src="Static/vue.js"></script>
    <script src="Element/element.js"></script>
    <style>
        div.el-col-12 {
            width: 100%;
        }

        [v-cloak] {
            display: none
        }

        ::-webkit-scrollbar {
            width: 0px;
        }
    </style>
</head>
<body style="height:100%">
    <script>
        let app
    </script>
    <div id="app" style="height: 100% " v-cloak>
        <!--top-->
        <el-menu :default-active="activeIndexTop"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-menu-item index="1">文档说明</el-menu-item>
            <el-menu-item index="2" @click="IsShowLeftColumn=!IsShowLeftColumn">隐藏/显示左边栏</el-menu-item>

            <el-submenu index="0" style="float:right" v-show="IsLanguage">
                <template slot="title">
                    语言切换
                </template>
                <el-menu-item :index="'0-'+item.Wt_ID"
                              v-for="item in LanguageType"
                              :key="item.Wt_ID"
                              @select="UpdateDataType(1)">
                    {{item.Wt_Title}}
                </el-menu-item>
            </el-submenu>
            <el-menu-item v-show="IsSys" index="-1" style="float:right"><span id="iframeSrcSpan">{{iframeSrc}}</span></el-menu-item>
        </el-menu>

        <!--left-->
        <el-row class="tac" v-show="IsShowLeftColumn" :style="'width:'+ (IsShowLeftColumn?14:1)+'%; float: left; height: 94%; background-color: #545c64; overflow: scroll; ' ">
            <el-col :span="12">
                <!--handleOpen(key, keyPath)-->
                <!--@open="handleOpen"
            @close="handleClose"-->
                <el-menu :default-active="activeIndexLeft"
                         class="el-menu-vertical-demo"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         unique-opened>
                    <el-submenu v-for="(item,index) in SysIframeSrcList"
                                :index="'-1-'+index"
                                :key="'-1-'+index">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(SrcItem,SrcIndex) in item.srcList"
                                      :index="'-1-'+index+'-'+SrcIndex"
                                      @click="iframeSrc = SrcItem.src"
                                      :key="'-1-'+index+'-'+SrcIndex">
                            <i class="el-icon-document"></i>
                            {{SrcItem.title}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
        <div :style="'width:'+(IsShowLeftColumn?86:100)+'%; height: 94%; float: left;' ">
            <iframe :src="iframeSrc" style="width: 100%; height: 100%; margin-top: -2px; margin-left: -2px; ">
            </iframe>
        </div>
    </div>

    <script type="module">
        app = new Vue({
            el: "#app",
            data() {
                return {
                    /** 语言类型*/
                    LanguageType: [],
                    //iframeSrc: '',//当前显示页面
                    iframeSrc: 'Pages/ScreenAndWeight.html',//当前显示页面
                    //iframeSrc: 'HtmlDevelop/Develop.html',//当前显示页面
                    activeIndexTop: '1',
                    activeIndexLeft: '-1-0-0',
                    IsSys: true,//是否展示系统列表
                    //IsSys: false,//是否展示系统列表
                    IsLanguage: false,
                    /**是否是开发者*/
                    IsDevelop: getQueryString("IsSys") == "1",
                    /**是否显示左边栏*/
                    IsShowLeftColumn: true,
                    //系统列表
                    SysIframeSrcList: [
                        {
                            title: '程序使用说明',
                            srcList: [
                                {
                                    title: '屏幕+称重传感器',
                                    src: 'Pages/ScreenAndWeight.html'
                                },
                            ],
                        },
                        {
                            title: '程序设置说明',
                            srcList: [
                                //{
                                //    title: '测距摄像头设置',
                                //    src: 'HtmlSet/CameraRangingShow.html'
                                //},
                            ],
                        },
                    ],
                }
            },
            async created() {
                
            },
            methods: {
                handleSelect(key, keyPath) {
                    if (keyPath.length != 2) {
                        return
                    }
                    const arr = keyPath[1].split('-');
                    if (arr.length != 2) {
                        return
                    }
                    if (arr[0] != '0') {
                        return
                    }
                    //假如是语言切换
                    this.UpdateDataType(arr[1])
                }
            }
        });

        /**
         * 获取url参数
         * @param name
         */
        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            };
            return null;
        }
    </script>
</body>
</html>